@babel/helper-builder-react-jsx

Helper function to build react jsx

7.25.9
latest
Source
npm

Version published: 4 weeks ago

Maintainers: 4

Created: 7 years ago

What is @babel/helper-builder-react-jsx?

@babel/helper-builder-react-jsx is a Babel helper module that assists in transforming JSX syntax into JavaScript. It is primarily used internally by Babel plugins to handle JSX transformations, making it easier to convert JSX elements into the corresponding React.createElement calls or other custom JSX pragma functions.

What are @babel/helper-builder-react-jsx's main functionalities?

Transform JSX to React.createElement

This feature allows you to transform a JSX element into a React.createElement call. The code sample demonstrates how to create a JSX element and then transform it into a React.createElement call using the @babel/helper-builder-react-jsx package.

const t = require('@babel/types');
const buildElement = require('@babel/helper-builder-react-jsx');

const jsxElement = t.jSXElement(
  t.jSXOpeningElement(t.jSXIdentifier('div'), [], false),
  t.jSXClosingElement(t.jSXIdentifier('div')),
  [t.jSXText('Hello, world!')],
  false
);

const reactElement = buildElement({
  tagExpr: t.identifier('React.createElement'),
  tagName: 'div',
  args: [t.stringLiteral('div'), t.nullLiteral(), t.stringLiteral('Hello, world!')]
});

console.log(reactElement);

Custom JSX Pragma

This feature allows you to transform a JSX element using a custom JSX pragma function instead of React.createElement. The code sample demonstrates how to create a JSX element and then transform it using a custom pragma function called MyCustomPragma.

const t = require('@babel/types');
const buildElement = require('@babel/helper-builder-react-jsx');

const jsxElement = t.jSXElement(
  t.jSXOpeningElement(t.jSXIdentifier('MyComponent'), [], false),
  t.jSXClosingElement(t.jSXIdentifier('MyComponent')),
  [t.jSXText('Hello, custom pragma!')],
  false
);

const customPragmaElement = buildElement({
  tagExpr: t.identifier('MyCustomPragma'),
  tagName: 'MyComponent',
  args: [t.stringLiteral('MyComponent'), t.nullLiteral(), t.stringLiteral('Hello, custom pragma!')]
});

console.log(customPragmaElement);

Other packages similar to @babel/helper-builder-react-jsx